<template>
  <div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="规则名称">
        <el-input v-model="name" placeholder="请输入规则名称" style="width: 100%"/>
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName">
      <el-tab-pane label="工作日" name="first"></el-tab-pane>
      <el-tab-pane label="休息日" name="second"></el-tab-pane>
      <el-tab-pane label="节假日" name="third"></el-tab-pane>
    </el-tabs>
    <!--    工作日-->
    <div class="rule-list" v-if="activeName=='first'">
      <div class="rule-box-header">
        允许加班
        <el-switch
          v-model="overtimeRest.type">
        </el-switch>
      </div>
      <template v-if="overtimeRest.type">
        <div class="rule-box-header">
          <p>计算方式</p>
          <div class="rule-box-line">
            <el-radio-group v-model="overtimeRest.method">
              <el-row :gutter="10">
                <el-col :span="24" class="mb5">
                  <el-radio :label="1">按审批时长计算</el-radio>
                </el-col>
<!--                <el-col :span="24" class="mb5">-->
<!--                  <el-radio :label="2">在审批的时段内，按打卡时长计算</el-radio>-->
<!--                </el-col>-->
<!--                <el-col :span="24">-->
<!--                  <el-radio :label="3">无需审批，按打卡时长计算</el-radio>-->
<!--                </el-col>-->
              </el-row>
            </el-radio-group>
          </div>
        </div>
        <div class="rule-box-header">
          <p>最小加班时间</p>
          <div class="rule-box-line">
            累计加班少于
            <el-input v-model="overtimeRest.all" placeholder="请输入" size="small" style="width: 100px"/>
            分钟，不计入加班
          </div>
        </div>
        <div class="rule-box-header">
          <p>加班时长计为</p>
          <div class="rule-box-line">
            <el-radio-group v-model="overtimeRest.useType">
              <el-row :gutter="10">
                <el-col :span="24" class="mb5">
                  <el-radio :label="1">计为调休</el-radio>
                </el-col>
                <el-col :span="24" class="mb5">
                  <el-radio :label="2">计为加班费</el-radio>
                </el-col>
              </el-row>
              <!--            <el-radio :label="3">员工自主选择</el-radio>-->
            </el-radio-group>
          </div>
        </div>
      </template>
    </div>
    <!--    休息日-->
    <div class="rule-list" v-if="activeName=='second'">
      <div class="rule-box-header">
        允许加班
        <el-switch
          v-model="overtimeWork.type">
        </el-switch>
      </div>
      <template v-if="overtimeWork.type">
        <div class="rule-box-header">
          <p>计算方式</p>
          <div class="rule-box-line">
            <el-radio-group v-model="overtimeWork.method">
              <el-row :gutter="10">
                <el-col :span="24" class="mb5">
                  <el-radio :label="1">按审批时长计算</el-radio>
                </el-col>
<!--                <el-col :span="24" class="mb5">-->
<!--                  <el-radio :label="2">在审批的时段内，按打卡时长计算</el-radio>-->
<!--                </el-col>-->
<!--                <el-col :span="24">-->
<!--                  <el-radio :label="3">无需审批，按打卡时长计算</el-radio>-->
<!--                </el-col>-->
              </el-row>
            </el-radio-group>
          </div>
        </div>
        <div class="rule-box-header">
          <p>最小加班时间</p>
          <div class="rule-box-line">
            累计加班少于
            <el-input v-model="overtimeWork.all" placeholder="请输入" size="small" style="width: 100px"/>
            分钟，不计入加班
          </div>
        </div>
        <div class="rule-box-header">
          <p>加班时长计为</p>
          <div class="rule-box-line">
            <el-radio-group v-model="overtimeWork.useType">
              <el-row :gutter="10">
                <el-col :span="24" class="mb5">
                  <el-radio :label="1">计为调休</el-radio>
                </el-col>
                <el-col :span="24" class="mb5">
                  <el-radio :label="2">计为加班费</el-radio>
                </el-col>
              </el-row>
              <!--            <el-radio :label="3">员工自主选择</el-radio>-->
            </el-radio-group>
          </div>
        </div>
      </template>
    </div>
    <!--    节假日-->
    <div class="rule-list" v-if="activeName=='third'">
      <div class="rule-box-header">
        允许加班
        <el-switch
          v-model="overtimeHoliday.type">
        </el-switch>
      </div>
      <template v-if="overtimeHoliday.type">
        <div class="rule-box-header">
          <p>计算方式</p>
          <div class="rule-box-line">
            <el-radio-group v-model="overtimeHoliday.method">
              <el-row :gutter="10">
                <el-col :span="24" class="mb5">
                  <el-radio :label="1">按审批时长计算</el-radio>
                </el-col>
<!--                <el-col :span="24" class="mb5">-->
<!--                  <el-radio :label="2">在审批的时段内，按打卡时长计算</el-radio>-->
<!--                </el-col>-->
<!--                <el-col :span="24">-->
<!--                  <el-radio :label="3">无需审批，按打卡时长计算</el-radio>-->
<!--                </el-col>-->
              </el-row>
            </el-radio-group>
          </div>
        </div>
        <div class="rule-box-header">
          <p>最小加班时间</p>
          <div class="rule-box-line">
            累计加班少于
            <el-input v-model="overtimeHoliday.all" placeholder="请输入" size="small" style="width: 100px"/>
            分钟，不计入加班
          </div>
        </div>
        <div class="rule-box-header">
          <p>加班时长计为</p>
          <div class="rule-box-line">
            <el-radio-group v-model="overtimeHoliday.useType">
              <el-row :gutter="10">
                <el-col :span="24" class="mb5">
                  <el-radio :label="1">计为调休</el-radio>
                </el-col>
                <el-col :span="24" class="mb5">
                  <el-radio :label="2">计为加班费</el-radio>
                </el-col>
              </el-row>
              <!--            <el-radio :label="3">员工自主选择</el-radio>-->
            </el-radio-group>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import {getOvertimeRules, addOvertimeRules, updateOvertimeRules} from '@/api/system/rulesOverTime.js'

export default {
  props: ['config'],
  name: "editRule",
  data() {
    return {
      name: '',
      activeName: 'first',
      radio: 3,
      overtimeRest: {
        type: true,// 0-不允许加班1-允许加班
        method: 1, // 1-按审批时长计算2-在审批的时段内，按打卡时长计算3-无需审批，按打卡时长计算
        all: '', // 累计加班少于分钟，不计入加班
        useType: 1, // 1-计为调休2-计为加班费3-员工自主选择
      },
      overtimeWork: {
        type: true,// 0-不允许加班1-允许加班
        method: 1, // 1-按审批时长计算2-在审批的时段内，按打卡时长计算3-无需审批，按打卡时长计算
        all: '', // 累计加班少于分钟，不计入加班
        useType: 1, // 1-计为调休2-计为加班费3-员工自主选择
      },
      overtimeHoliday: {
        type: true,// 0-不允许加班1-允许加班
        method: 1, // 1-按审批时长计算2-在审批的时段内，按打卡时长计算3-无需审批，按打卡时长计算
        all: '', // 累计加班少于分钟，不计入加班
        useType: 1, // 1-计为调休2-计为加班费3-员工自主选择
      }
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      if (this.config) {
        getOvertimeRules(this.config.id).then(res => {
          this.name = res.data.name
          for (let index in this.overtimeRest) {
            if (res.data.overtimeRest[index]) {
              if (index == 'type') {
                if (res.data.overtimeRest[index]) {
                  this.overtimeRest[index] = true
                } else {
                  this.overtimeRest[index] = false
                }
              } else {
                this.overtimeRest[index] = res.data.overtimeRest[index]
              }
            }
          }
          for (let index in this.overtimeWork) {
            if (res.data.overtimeWork[index]) {
              if (index == 'type') {
                if (res.data.overtimeWork[index]) {
                  this.overtimeWork[index] = true
                } else {
                  this.overtimeWork[index] = false
                }
              } else {
                this.overtimeWork[index] = res.data.overtimeWork[index]
              }
            }
          }
          for (let index in this.overtimeHoliday) {
            if (res.data.overtimeHoliday[index]) {
              if (index == 'type') {
                if (res.data.overtimeHoliday[index]) {
                  this.overtimeHoliday[index] = true
                } else {
                  this.overtimeHoliday[index] = false
                }
              } else {
                this.overtimeHoliday[index] = res.data.overtimeHoliday[index]
              }
            }
          }
          this.overtimeRest.id = res.data.overtimeRest.id
          this.overtimeWork.id = res.data.overtimeWork.id
          this.overtimeHoliday.id = res.data.overtimeHoliday.id
        })
      }
    },
    submit(id) {
      console.log('提交了')
      let overtimeRest_ = this.$deepCopy(this.overtimeRest)
      let overtimeWork_ = this.$deepCopy(this.overtimeWork)
      let overtimeHolidy_ = this.$deepCopy(this.overtimeHoliday)
      overtimeRest_.type = overtimeRest_.type ? 1 : 0
      overtimeWork_.type = overtimeWork_.type ? 1 : 0
      overtimeHolidy_.type = overtimeHolidy_.type ? 1 : 0
      overtimeRest_.all = parseInt(overtimeRest_.all) || 0
      overtimeWork_.all = parseInt(overtimeWork_.all) || 0
      overtimeHolidy_.all = parseInt(overtimeHolidy_.all) || 0
      let data_ = {
        name: this.name,
        overtimeRest: overtimeRest_,
        overtimeWork: overtimeWork_,
        overtimeHoliday: overtimeHolidy_
      }
      console.log('data_:', data_)
      if (this.config) {
        data_.id = this.config.id
        updateOvertimeRules(data_).then(res => {
          this.$emit('closeTable')
        })
      } else {
        addOvertimeRules(data_).then(res => {
          this.$emit('closeTable')
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
